<template>
  <view>
    <u-popup
      :show="show"
      mode="center"
      :round="round"
      :bg-color="bgColor"
      :close-on-click-overlay="false"
      :safe-area-inset-bottom="false"
      @close="show = false"
    >
      <view class="popup-bg">
        <view class="title">设备编号：{{ params.socketId || "-" }}</view>
        <view class="popup-body f f-ac f-jc">
          <view class="popup-body-box f f-ac f-jc" v-if="params.type == 0">
            <view
              class="two-item"
              :class="{ 'bg-green': i.check, disabled: i.disabled }"
              v-for="(i, k) in twoList"
              :key="k"
              @click="handleChoose(i, 'two')"
            >
              {{ i.label }}
            </view>
          </view>
          <view class="popup-body-box f f-ac f-jb f-w" v-if="params.type == 1">
            <view
              class="ten-item"
              :class="{ 'bg-green': i.check, disabled: i.disabled }"
              v-for="(i, k) in tenList"
              :key="k"
              @click="handleChoose(i, 'ten')"
            >
              {{ i.label }}
            </view>
          </view>
        </view>
        <view
          class="popup-btn-box f f-ac f-jb"
          :style="{
            borderBottomLeftRadius: round + 'px',
            borderBottomRightRadius: round + 'px',
          }"
        >
          <view v-if="cencel" class="popup-btn-left f-1" @click="show = false">
            {{ cencelText }}
          </view>
          <view class="popup-btn-right bg-green f-1" @click="handleConfirm">
            {{ confirmText }}
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { postChargeStatus } from "@/request/payApi.js";
export default {
  props: {
    // 控制显示
    value: {
      type: Boolean,
      default: false,
    },
    // 参数
    params: {
      type: Object,
      default: () => {
        return {
          type: null, // 0两孔 1十孔
          portIndex: null, // 充电口
          socketId: "", // 充电桩id
        };
      },
    },
    // 圆角
    round: {
      type: [Number, String],
      default: 15,
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: "#fff",
    },
    // 显示取消
    cencel: {
      type: Boolean,
      default: true,
    },
    // 左侧按钮文字
    cencelText: {
      type: String,
      default: "取消",
    },
    // 右侧按钮文字
    confirmText: {
      type: String,
      default: "确定",
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("close", false);
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.queryStatus();
      } else {
        setTimeout(() => {
          this.twoList.forEach((i) => {
            i.check = false;
            i.disabled = false;
          });
          this.tenList.forEach((i) => {
            i.check = false;
            i.disabled = false;
          });
        }, 300);
      }
    },
  },
  data() {
    return {
      // 两孔列表
      twoList: [
        { label: "A", value: 0, check: false, disabled: false },
        { label: "B", value: 1, check: false, disabled: false },
      ],
      // 十孔列表
      tenList: [
        { label: "1", value: 1, check: false, disabled: false },
        { label: "2", value: 2, check: false, disabled: false },
        { label: "3", value: 3, check: false, disabled: false },
        { label: "4", value: 4, check: false, disabled: false },
        { label: "5", value: 5, check: false, disabled: false },
        { label: "6", value: 6, check: false, disabled: false },
        { label: "7", value: 7, check: false, disabled: false },
        { label: "8", value: 8, check: false, disabled: false },
        { label: "9", value: 9, check: false, disabled: false },
        { label: "10", value: 10, check: false, disabled: false },
      ],
    };
  },
  methods: {
    // 查询充电口状态
    queryStatus() {
      let { socketId, type } = this.params;
      postChargeStatus({ socketId, type }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((i, k) => {
            if (type == 0) {
              this.twoList[k].disabled = i.chargerPlugRunStatus == "FREE" ? false : true; // FREE可用 CHARGING充电中
            } else {
              this.tenList[k].disabled = i.chargerPlugRunStatus == "FREE" ? false : true; // FREE可用 CHARGING充电中
            }
          });
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
          this.show = false;
        }
      });
    },
    // 确认事件
    handleConfirm() {
      let portIndex = 0;
      if (this.params.type == 0) {
        if (!this.twoList.some((i) => i.check)) {
          uni.showToast({
            title: "请选择充电口",
            icon: "none",
          });
          return;
        }
        portIndex = this.twoList.find((i) => i.check).value;
      } else {
        if (!this.tenList.some((i) => i.check)) {
          uni.showToast({
            title: "请选择充电口",
            icon: "none",
          });
          return;
        }
        portIndex = this.tenList.find((i) => i.check).value;
      }
      const { socketId, type } = this.params;
      this.$emit("confirm", {
        socketId,
        type,
        portIndex,
      });
    },
    // 选择充电口
    handleChoose(row, type) {
      if (row.disabled) return;
      if (type == "two") {
        this.twoList.forEach((i) => {
          i.check = i.value == row.value ? !i.check : false;
        });
      } else {
        this.tenList.forEach((i) => {
          i.check = i.value == row.value ? !i.check : false;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-bg {
  width: 670rpx;
  box-sizing: border-box;
  position: relative;
  .title {
    height: 100rpx;
    width: 100%;
    line-height: 100rpx;
    color: #24de73;
    font-family: FZZongYi-M05S;
    font-size: 40rpx;
    padding-left: 20rpx;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1rpx solid #24de73;
  }
  .popup-body {
    min-height: 260rpx;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    color: #21212a;
    font-family: FZZongYi-M05S;
    font-size: 40rpx;
    letter-spacing: 8rpx;
    overflow: hidden;
    &-box {
      position: relative;
      text-align: center;
      word-break: break-all;
      .two-item {
        width: 150rpx;
        height: 150rpx;
        color: #24de73;
        border-radius: 10rpx;
        text-align: center;
        line-height: 150rpx;
        border: 6rpx solid #24de73;
        &:last-child {
          margin-left: 20rpx;
        }
      }
      .ten-item {
        width: 105rpx;
        height: 105rpx;
        color: #24de73;
        border-radius: 10rpx;
        text-align: center;
        line-height: 105rpx;
        border: 6rpx solid #24de73;
        margin-bottom: 20rpx;
        &:nth-child(n + 6) {
          margin-bottom: 0;
        }
      }
      .bg-green {
        color: #fff;
      }
      .disabled {
        color: #909090;
        background-color: #dddddd;
        border-color: #dddddd;
        z-index: 1;
      }
      &::before {
        content: "";
        display: block;
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        position: absolute;
        left: 30rpx;
        bottom: -10rpx;
        background-color: #24de734d;
      }
      &::after {
        content: "";
        display: block;
        width: 58rpx;
        height: 58rpx;
        border-radius: 50%;
        position: absolute;
        right: 17rpx;
        top: -10rpx;
        background-color: #24de734d;
      }
    }
  }
  .popup-btn-box {
    height: 100rpx;
    width: 100%;
    line-height: 100rpx;
    letter-spacing: 8rpx;
    font-size: 28rpx;
    text-align: center;
    border-top: 1rpx solid #24de73;
    overflow: hidden;
    .popup-btn-left {
      height: 100%;
      color: #909090;
      &:active {
        background-color: #f1f1f1;
      }
    }
    .popup-btn-right {
      height: 100%;
      color: #fff;
      &:active {
        background-color: #25ca6a;
      }
    }
  }
}
</style>
